import React from 'react'
import "../App.css"
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      List: ['苏鑫', '书写', '速写', '觉得', 'uhcdh', 'ghhuyhu'],
      isShow: false,
      selectIndex: 0,
      inputValue:""
    }
  }
  render() {
    return (
      <div>
        <input type="text" placeholder="请输入内容" value={this.state.inputValue} onFocus={() => {
          //聚焦事件
          this.setState({
            isShow: true
          })
          //失去焦点
        }} onBlur={() => {
          this.setState({
            isShow: false
          })
        }}
          //键盘按下
          onKeyDown={(event) => {
            // console.log(event.keyCode) 
            if (event.keyCode === 40) {
              this.state.selectIndex++;
              if (this.state.selectIndex >= this.state.List.length) {
                this.setState({
                  selectIndex: 0
                })
                if(this.state.selectIndex === this.state.List.length){
                  this.setState({
                    inputValue:this.state.List[0]
                  })
                }
                return;
              }
              this.setState({
                selectIndex: this.state.selectIndex
              })
            } else if (event.keyCode === 38) {
              this.state.selectIndex--;
              if (this.state.selectIndex < 0) {
                this.setState({
                  selectIndex: this.state.List.length - 1
                })
                if(this.state.selectIndex === -1){
                  this.setState({
                    inputValue:this.state.List[this.state.List.length - 1]
                  })
                }
                return;
              }

              this.setState({
                selectIndex: this.state.selectIndex
              })

            }
            var temp = this.state.List[this.state.selectIndex];
            this.setState({
              inputValue: temp
            })

          }}
        />
        <div className={this.state.isShow ? 'active_show' : 'active_hidden'}>
          {
            this.state.List.map((ele, index) => {
              return <div key={ele} className={this.state.selectIndex === index ? 'app_item' : ''}>{ele}</div>
            })
          }
        </div>
      </div>
    )
  }
}

export default Home;

// import React, { Component } from 'react'
// import Header from "./components/Header"
// export class Home extends Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       headerList: ['123', '456', '789', '147', '258', '369', '357'],
//       msg:""
//     }
//   }

//   footer=(message)=>{
//     console.log(message);
//     this.setState({
//       msg:message
//     })
//   }
//   render() {
//     return (
//       <div>
//         <Header headerList={this.state.headerList} 
//         footer={this.footer}/>
//         <div>{this.state.msg}</div>
//       </div>
//     )
//   }
// }

// export default Home
